﻿<UserControl x:Class="NopControls.ColorPicker"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:NopControls="clr-namespace:NopControls" mc:Ignorable="d"
    SizeChanged="UserControl_SizeChanged"
             Loaded="UserControl_Loaded"
    d:DesignHeight="300" d:DesignWidth="400">
    <Grid x:Name="RootGrid">
        <Grid.Resources>            
            <NopControls:StringFormatConverter x:Key="StringFormat" />
            <Style TargetType="TextBox" x:Key="BlackBox">
                <Setter Property="Margin" Value="2,0,0,0"/>
                <Setter Property="TextAlignment" Value="Center"/>
            </Style>
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="20"/>
            <ColumnDefinition Width="200"/>
        </Grid.ColumnDefinitions>
        <Grid Grid.Column="0" Margin="5">
            <Rectangle x:Name="ColorPanel" Fill="Red" MouseLeftButtonDown="ColorPanel_MouseLeftButtonDown" MouseLeftButtonUp="ColorPanel_MouseLeftButtonUp" MouseMove="ColorPanel_MouseMove"/>
            <Rectangle IsHitTestVisible="False">
                <Rectangle.Fill>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                        <GradientStop Offset="0" Color="#ffffffff"/>
                        <GradientStop Offset="1" Color="#00ffffff"/>
                    </LinearGradientBrush>
                </Rectangle.Fill>
            </Rectangle>
            <Rectangle IsHitTestVisible="False" Stroke="Black" StrokeThickness="1">
                <Rectangle.Fill>
                    <LinearGradientBrush StartPoint="0,1" EndPoint="0, 0">
                        <GradientStop Offset="0" Color="#ff000000"/>
                        <GradientStop Offset="1" Color="#00000000"/>
                    </LinearGradientBrush>
                </Rectangle.Fill>
            </Rectangle>
            <Grid IsHitTestVisible="False" Width="10" Height="10" VerticalAlignment="Top" HorizontalAlignment="Left">
                <Grid.RenderTransform>
                    <TranslateTransform x:Name="SelectorTranslate" X="-5" Y="-5"/>
                </Grid.RenderTransform>
                <Ellipse Width="10" Height="10" StrokeThickness="3" Stroke="#FFFFFFFF"/>
                <Ellipse Width="10" Height="10" StrokeThickness="1" Stroke="#FF000000"/>
            </Grid>
        </Grid>
        <Grid Grid.Column="1" Margin="1,5">
            <Rectangle x:Name="HueLevel" Stroke="Black"  StrokeThickness="1" MouseLeftButtonDown="HueLevel_MouseLeftButtonDown" MouseLeftButtonUp="HueLevel_MouseLeftButtonUp" MouseMove="HueLevel_MouseMove">
                <Rectangle.Fill>
                    <LinearGradientBrush StartPoint ="0,0" EndPoint="0,1">
                        <GradientStop Offset="0.00" Color="#ffff0000"/>
                        <GradientStop Offset="0.17" Color="#ffffff00"/>
                        <GradientStop Offset="0.33" Color="#ff00ff00"/>
                        <GradientStop Offset="0.50" Color="#ff00ffff"/>
                        <GradientStop Offset="0.66" Color="#ff0000ff"/>
                        <GradientStop Offset="0.83" Color="#ffff00ff"/>
                        <GradientStop Offset="1.00" Color="#ffff0000"/>
                    </LinearGradientBrush>
                </Rectangle.Fill>
            </Rectangle>
            <Grid x:Name="HueSelector" IsHitTestVisible="False" Height="8" VerticalAlignment="Top">
                <Grid.RenderTransform>
                    <TranslateTransform x:Name="HueSelectorTranslate" Y="-4"/>
                </Grid.RenderTransform>
                <Path x:Name="LeftHueSelector" Width="8" Height="8" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FF000000" Data="F1 M 276.761,316L 262.619,307.835L 262.619,324.165L 276.761,316 Z ">
                    <Path.RenderTransform>
                        <TranslateTransform X="-6"/>
                    </Path.RenderTransform>
                </Path>
                <Path x:Name="RightHueSelector" Width="8" Height="8" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FF000000" Data="F1 M 276.761,316L 262.619,307.835L 262.619,324.165L 276.761,316 Z ">
                    <Path.RenderTransform>
                        <TransformGroup>
                            <RotateTransform Angle="180" />
                            <TranslateTransform Y="8" X="14"/>
                        </TransformGroup>
                    </Path.RenderTransform>
                </Path>
            </Grid>
        </Grid>
        <Grid Grid.Column="2" Margin="5">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Grid Height="60">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <TextBlock Text="Current:" HorizontalAlignment="Center"/>
                <TextBlock Grid.Column="1" Text="New:" HorizontalAlignment="Center"/>
                <Rectangle Grid.ColumnSpan="2" Stroke="Black" StrokeThickness="1" Grid.Row="1"/>
                <Rectangle x:Name="OriginalColorView" Fill="Black" Margin="1,1,0,1" Grid.Row="1"/>
                <Rectangle Grid.Column="1" x:Name="SelectedColorView" Fill="Black" Margin="0,1,1,1" Grid.Row="1"/>
            </Grid>
            <Grid Grid.Row="1" Height="Auto" Margin="0,5" x:Name="gridRGB">
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="20"/>
                    <ColumnDefinition/>
                    <ColumnDefinition Width="80"/>
                </Grid.ColumnDefinitions>
                <!--<Rectangle Stroke="Black" StrokeThickness="1" Grid.RowSpan="5" Grid.ColumnSpan="3"/>-->
                <TextBlock Grid.Row="0" Text="R:" HorizontalAlignment="Right" VerticalAlignment="Center"/>
                <Slider Grid.Row="0" Grid.Column="1" x:Name="sliderR" Minimum="0" Maximum="255" VerticalAlignment="Center" ValueChanged="sliderR_ValueChanged" TabIndex="1"/>
                <TextBox Grid.Row="0" Grid.Column="2" Text="{Binding ElementName=sliderR, Path=Value, Converter={StaticResource StringFormat}, ConverterParameter=0, Mode=TwoWay}" VerticalAlignment="Center" Style="{StaticResource BlackBox}" x:Name="textR" TabIndex="2" KeyUp="text_KeyUp"/>
                <TextBlock Grid.Row="1" Text="G:" HorizontalAlignment="Right" VerticalAlignment="Center"/>
                <Slider Grid.Row="1" Grid.Column="1" x:Name="sliderG" Minimum="0" Maximum="255" VerticalAlignment="Center" ValueChanged="sliderG_ValueChanged" TabIndex="3"/>
                <TextBox Grid.Row="1" Grid.Column="2" Text="{Binding ElementName=sliderG, Path=Value, Converter={StaticResource StringFormat}, ConverterParameter=0, Mode=TwoWay}" VerticalAlignment="Center" Style="{StaticResource BlackBox}" x:Name="textG" TabIndex="4" KeyUp="text_KeyUp"/>
                <TextBlock Grid.Row="2" Text="B:" HorizontalAlignment="Right" VerticalAlignment="Center"/>
                <Slider Grid.Row="2" Grid.Column="1" x:Name="sliderB" Minimum="0" Maximum="255" VerticalAlignment="Center" ValueChanged="sliderB_ValueChanged" TabIndex="5"/>
                <TextBox Grid.Row="2" Grid.Column="2" Text="{Binding ElementName=sliderB, Path=Value, Converter={StaticResource StringFormat}, ConverterParameter=0, Mode=TwoWay}" VerticalAlignment="Center" Style="{StaticResource BlackBox}" x:Name="textB" TabIndex="6" KeyUp="text_KeyUp"/>
            </Grid>
            <Grid Grid.Row="2" Height="Auto" Margin="0,10" x:Name="gridHSV">
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="20"/>
                    <ColumnDefinition/>
                    <ColumnDefinition Width="80"/>
                </Grid.ColumnDefinitions>
                <!--<Rectangle Stroke="Black" StrokeThickness="1" Grid.RowSpan="5" Grid.ColumnSpan="3"/>-->
                <TextBlock Grid.Row="0" Text="H:" HorizontalAlignment="Right" VerticalAlignment="Center"/>
                <Slider Grid.Row="0" Grid.Column="1" x:Name="sliderH" Minimum="0" Maximum="360" VerticalAlignment="Center" ValueChanged="sliderH_ValueChanged" TabIndex="7"/>
                <TextBox Grid.Row="0" Grid.Column="2" Text="{Binding ElementName=sliderH, Path=Value, Converter={StaticResource StringFormat}, ConverterParameter=0, Mode=TwoWay}" VerticalAlignment="Center" Style="{StaticResource BlackBox}" x:Name="textH" TabIndex="8" KeyUp="text_KeyUp"/>
                <TextBlock Grid.Row="1" Text="S:" HorizontalAlignment="Right" VerticalAlignment="Center"/>
                <Slider Grid.Row="1" Grid.Column="1" x:Name="sliderS" Minimum="0" Maximum="100" VerticalAlignment="Center" ValueChanged="sliderS_ValueChanged" TabIndex="9"/>
                <TextBox Grid.Row="1" Grid.Column="2" Text="{Binding ElementName=sliderS, Path=Value, Converter={StaticResource StringFormat}, ConverterParameter=0, Mode=TwoWay}" VerticalAlignment="Center" Style="{StaticResource BlackBox}" x:Name="textS" TabIndex="10" KeyUp="text_KeyUp"/>
                <TextBlock Grid.Row="2" Text="V:" HorizontalAlignment="Right" VerticalAlignment="Center"/>
                <Slider Grid.Row="2" Grid.Column="1" x:Name="sliderV" Minimum="0" Maximum="100" VerticalAlignment="Center" ValueChanged="sliderV_ValueChanged" TabIndex="11"/>
                <TextBox Grid.Row="2" Grid.Column="2" Text="{Binding ElementName=sliderV, Path=Value, Converter={StaticResource StringFormat}, ConverterParameter=0, Mode=TwoWay}" VerticalAlignment="Center" Style="{StaticResource BlackBox}" x:Name="textV" TabIndex="12" KeyUp="text_KeyUp"/>
            </Grid>
        </Grid>
    </Grid>
</UserControl>

    